<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bottom-image>img {
            width: 100px;
            height: 100px;
        }

        .border-image {
            border: 3px solid blue;
        }
    </style>
</head>

<body>
    <h1>图片画廊</h1>
    <div>
        <button id="prevBtn">上一张</button>
        <span id="showCount">1/5</span>
        <button id="nextBtn">下一张</button>
    </div>

    <img src="https://picsum.photos/600/400?random=1" id="largeImage" alt="">

    <p id="title">风景 1</p>

    <div class="bottom-image" id="bottomImage">
        <!-- 5张小图 -->
    </div>

    <script>
        const imagesData = [
            { id: 1, src: 'https://picsum.photos/600/400?random=1', title: '风景 1' },
            { id: 2, src: 'https://picsum.photos/600/400?random=2', title: '风景 2' },
            { id: 3, src: 'https://picsum.photos/600/400?random=3', title: '风景 3' },
            { id: 4, src: 'https://picsum.photos/600/400?random=4', title: '风景 4' },
            { id: 5, src: 'https://picsum.photos/600/400?random=5', title: '风景 5' }
        ]
        const bottomImageEle = document.querySelector('#bottomImage');
        const largeImageEle = document.querySelector('#largeImage');
        const nextBtnEle = document.querySelector('#nextBtn');
        const prevBtnEle = document.querySelector('#prevBtn');
        const showCountEle = document.querySelector('#showCount');
        const titleEle = document.querySelector('#title');

        // 当前显示的图片数据下标（默认第一张）
        let index = 0;

        init();

        // 点击【下一张】按钮触发的事件
        nextBtnEle.onclick = function () {
            index++;
            init();
        }


        // 点击【上一张】按钮触发的事件
        prevBtnEle.onclick = function () {
            index--;
            init();
        };


        // 事件委托
        bottomImageEle.onclick = function (e) {
            if (e.target.nodeName == 'IMG') {
                // e.target：获取当前点击的目标标签
                // e.target.dataset.i：获取当前标签身上的data-i属性的值
                const i = e.target.dataset.i - 0;
                index = i;
                init();
            }
        }


        function init() {
            buttonStatusRender();
            countRender();
            largeImageRender();
            bottomImageRender();
            titleRender();
        }

        // 按钮状态的渲染
        function buttonStatusRender() {
            if (index == 0) {
                // 禁用【上一张】按钮
                prevBtnEle.disabled = true;
                nextBtnEle.disabled = false;
            } else if (index == imagesData.length - 1) {
                // 禁用【下一张】按钮
                nextBtnEle.disabled = true;
                prevBtnEle.disabled = false;
            } else {
                // 进入else，说明不是第一张也不是最后一张，取消两个按钮的禁用状态
                prevBtnEle.disabled = false;
                nextBtnEle.disabled = false;
            }
        }

        // 图片切换数字统计
        function countRender() {
            showCountEle.innerText = `${index + 1}/${imagesData.length}`
        }

        // 中间大图的渲染
        function largeImageRender() {
            largeImageEle.src = imagesData[index].src;
        }

        function titleRender() {
            titleEle.innerText = imagesData[index].title;
        }

        // 底部5张小图的渲染
        function bottomImageRender() {
            bottomImageEle.innerHTML = imagesData.map((item, i) => {
                return (
                    `<img data-i="${i}" class="${index == i ? 'border-image' : ''}" src="${item.src}" alt="" />`
                )
            }).join('')
        }






    </script>
</body>

</html>